// import React, { useState, useEffect } from "react";
// import { Pie, measureTextWidth } from "@ant-design/plots";

// const DemoPie = () => {
//   function renderStatistic(containerWidth, text, style) {
//     let scale = 1;

//     const textStyleStr = `width:${containerWidth}px;`;
//     return (`<div className='cavns' >${text}</div>`);
//   }

//   const data = [
//     {
//       type: "已收车费",
//       value: 50,
//     },
//     { type: "优惠券", value: 10 },
//     { type: "实收金额", value: 30 },
//     { type: "赠送金额", value: 10 },
//     {
//       type: "未收车费",
//       value: 50,
//     },
//   ];
//   const config = {
//     appendPadding: 10,
//     data,
//     angleField: "value",
//     colorField: "type",
//     radius: 1,
//     innerRadius: 0.64,
//     meta: {
//       value: {
//         formatter: (v) => `${v} `,
//       },
//     },
//     label: {
//       type: "inner",
//       offset: "-50%",
//       style: {
//         textAlign: "center",
//       },
//       autoRotate: false,
//       content: "{value}",
//     },
//     statistic: {
//       title: {
//         offsetY: -4,
//         customHtml: (container, view, datum) => {
//           const { width, height } = container.getBoundingClientRect();
//           const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
//           const text = datum ? datum.type : "总计";
//           return renderStatistic(d, text, {
//             fontSize: 28,
//           });
//         },
//       },
//       content: {
//         offsetY: 4,
//         style: {
//           fontSize: "32px",
//         },
//         customHtml: (container, view, datum, data) => {
//           const { width } = container.getBoundingClientRect();
//           const text = datum
//             ? `¥ ${datum.value}`
//             : `¥ ${data.reduce((r, d) => r + d.value, 0)}`;
//           return renderStatistic(width, text, {
//             fontSize: 32,
//           });
//         },
//       },
//     },
//     // 添加 中心统计文本 交互
//     interactions: [
//       {
//         type: "element-selected",
//       },
//       {
//         type: "element-active",
//       },
//       {
//         type: "pie-statistic-active",
//       },
//     ],
//   };
//   return <Pie {...config} />;
// };

// export default DemoPie;


import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Pie, G2 } from '@ant-design/plots';

const DemoPie = () => {
  const G = G2.getEngine('canvas');
  const data = [
    {
      type: '已收费',
      value: 50,
    },
    {
      type: '优惠券',
      value: 10,
    },
    {
      type: '实收金额',
      value: 30,
    },
    {
      type: '增送金额',
      value: 10,
    },
    {
      type: '未收费',
      value: 30,
    }
  
  ];
  const cfg = {
    appendPadding: 10,
    data,
    angleField: 'value',
    colorField: 'type',
    radius: 0.75,
    legend: false,
    label: {
      type: 'spider',
      labelHeight: 40,
      formatter: (data, mappingData) => {
        const group = new G.Group({});
        group.addShape({
          type: 'circle',
          attrs: {
            x: 0,
            y: 0,
            width: 40,
            height: 50,
            r: 5,
            fill: mappingData.color,
          },
        });
        group.addShape({
          type: 'text',
          attrs: {
            x: 10,
            y: 8,
            text: `${data.type}`,
            fill: mappingData.color,
          },
        });
        group.addShape({
          type: 'text',
          attrs: {
            x: 0,
            y: 25,
            text: `${data.value}万元 ${data.percent * 100}%`,
            fill: 'rgba(0, 0, 0, 0.65)',
            fontWeight: 700,
          },
        });
        return group;
      },
    },
    interactions: [
      {
        type: 'element-selected',
      },
      {
        type: 'element-active',
      },
      {
        position:'right'
      }
    ],
  };
  const config = cfg;
  return <Pie {...config} />;
};

export default DemoPie;
